<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <div class="num">{{num}}</div>
       <div>{{number}}</div>
       <button @click="add">++</button>
    </div>
</body>
</html>
<!-- <script src="./vue.js"></script> -->
<script>
//   let obj = new Vue({
//     el: "#app",
//     data: {
//       num: 10
//     },
//     methods: {
//       add(){
//         this.num++;
//       }
//     },
//   })
//   console.log(obj);

 class Vue {
   constructor(pramas){
    //  console.log(pramas.el);
     this.$el = document.querySelector(pramas.el);
     for (const key in pramas.data) {
        this[key] = pramas.data[key]
     }
     for (const key in pramas.methods) {
        this[key] = pramas.methods[key]
     }
     let children = Array.from(this.$el.children);
     console.log(children);
     children.forEach(item => {
        let txt = item.innerText;
        // console.log(txt.includes('{{'));
        let click = item.getAttribute('@click');
        console.log(click);
        if (txt.includes('{{')){
          let xxm = txt.split('{{')[1].split("}}")[0];
          item.innerText = `${this[xxm]}`;
        } else if (click){
        //   console.log(this[click]);
          item.onclick = this[click].bind(this);
        }
     })
   }
 }


let obj = new Vue({
    el:"#app",
    data: {
      num: 10,
      number: 30
    },
    methods: {
      add() {
        this.num++;
        console.log(this.num);
        console.log('我是点击函数');
      }
    },
})


let vueNum = 10;
Object.defineProperty(obj,'num',{
    set(val){
      vueNum = val;
      let dom = document.querySelector('.num');
      dom.innerText = val;
    },
    get(){
      return vueNum;
    }
})
</script>